<!--公用icon组件
    使用方法: <support-icon :size="1" :type="0"></support-icon>,参数1: 容器尺寸  参数2: 图片
-->
<template>
  <span class="support-icon" :class="iconClass"></span>
</template>

<script>
export default {
  name: 'support-icon',
  props: {
    size: {
      type: Number
    },
    type: {
      type: Number
    }
  },
  computed: {
    iconClass () {
      // 减,折,特,票,保
      const classArray = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
      return 'icon_' + this.size + ' ' + classArray[this.type]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/mixin.styl"

.support-icon
  display: inline-block
  background-repeat: no-repeat
  overflow hidden
.icon_1
  width 12px
  height 12px
  background-size 12px 12px
  &.decrease
    bg-image('/assets/images/support-icon/decrease_1')
  &.discount
    bg-image('/assets/images/support-icon/discount_1')
  &.special
    bg-image('/assets/images/support-icon/special_1')
  &.invoice
    bg-image('/assets/images/support-icon/invoice_1')
  &.guarantee
    bg-image('/assets/images/support-icon/guarantee_1')

.icon_2
  width 16px
  height 16px
  background-size 16px 16px
  &.decrease
    bg-image('/assets/images/support-icon/decrease_2')
  &.discount
    bg-image('/assets/images/support-icon/discount_2')
  &.special
    bg-image('/assets/images/support-icon/special_2')
  &.invoice
    bg-image('/assets/images/support-icon/invoice_2')
  &.guarantee
    bg-image('/assets/images/support-icon/guarantee_2')

.icon_3
  width 12px
  height 12px
  background-size 12px 12px
  &.decrease
    bg-image('/assets/images/support-icon/decrease_3')
  &.discount
    bg-image('/assets/images/support-icon/discount_3')
  &.special
    bg-image('/assets/images/support-icon/special_3')
  &.invoice
    bg-image('/assets/images/support-icon/invoice_3')
  &.guarantee
    bg-image('/assets/images/support-icon/guarantee_3')
</style>
